<html>
<head>
    <title>HTML 文档结构</title>
</head>
<body>
  <div class="group">
    <!-- 输入框 -->
    <input type="text"  class ="todovalue" name="todovalueName" id="todovalueId" placeholder="请输入TODO内容"
        onkeydown="valuechange(event)"/>
 
    <input type="button"value="BUTTON2" onclick="handleClick()"></input>

    <button type="button"id="button3">BUTTON3</button>
    <!-- <button type="submit">BUTTON4</button> -->
    <!-- 遍历数据 -->
    <!-- 操作的footer -->

<div id="todoList">
    <div class="item" id="item0">
        <input class="item-chk"type="checkbox"/>
        <div class="item-sp">吃饭0</div>
        <input id="item-del-0"class="item-del"type="button"value="删除"onclick="handleDeClick(0)"></input>
    </div>
<div class="item"id="item1">
    <input class="item-chk"type="checkbox"/>
    <div class="item-sp">吃饭1</div>
    <input id="item-del-1"class="item-del"type="button"value="删除"onclick="handleDeClick(1)"></input>
</div>
<div class="item"id="item2">
    <input class="item-chk"type="checkbox"/>
    <div class="item-sp">吃饭2</div>
    <input id="item-del-2"class="item-del"type="button"value="删除"onclick="handleDeClick(2)"></input>
</div>
<div class="item"id="item3">
    <input class="item-chk"type="checkbox"/>
    <div class="item-sp">吃饭3</div>
    <input id="item-del-0"class="item-del"type="button"value="删除"onclick="handleDeClick(3)"></input>
</div>
</div>
</body>
<script lang="javascript">
    var index=0;
    function init(){
        document.getElementById("button3").onclick=handleClick;
    }
    function valueChange(e){
    console.log(e);
    if(event.keyCode==13){
        handleClick();
    }
}
function handleClick(){
    var temp=document.getElementsByClassName("todovalueName")[0].value;
    var div=document.createElement("div");
    div.innerText=temp;
    document.getElementById("todoList".append(div));
}
function test1(index){
    // console.log("test12111");
    // document.getElementById("todoList").children[index].style="background=color:red";
    // document.getElementById("item-del-"+index).style="opacity:1;";
}
function test2(index){
    // console.log("22222222");
    // document.getElementById("todoList").children[index].style="";
    // document.getElementById("item-del-"+index).style="opacity:0;";
}
function handleDeClick(index){
    var arr=document.getElementById("todoList");
    console.log(arr);
    document.getElementById("item"+index).remove();
}
init();
</script>
<style>

    body{
        display:flex;
        justify-content:center;
        align-items:center;
        min-height:100vh;
    }
.group{
    border: 1px solid blue;
    padding: 10px;
    border-radius: 20px;
}
.item{
    /* display:none; */
    margin: 3px;
    padding:3px;
    border-radius:4px;
    display: flex;
    align-items:center;
}
.item:hover .item-del{
   background-color: aqua;
   transform: scale(1.2);
}
    
.item-sp{
    flex-grow:1;
}
.item-del{
    background-color:red;
    border: 0px;
    color:aliceblue;
    opacity:0;
}
.item:hover .item-del{
    opacity:1;
}
.todovalue{
    border:2px solid #333333;
    padding:6px;
    outline:none;
}
.todovalue:focus{
    box-shadow:0px 0px 9px #4086cd;
    border:2px solid #4086cd;
    outline:none;
}


</style>
                                                                                                                                                                                       
</html>

